<template>
  <view class="container">
    <!-- 顶部用户信息区域 -->
    <view class="header-section">
      <view class="user-info">
        <!-- <view class="avatar-wrap">
          <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
          <view class="online-dot"></view>
        </view> -->
        <view class="user-text">
          <view class="welcome-text">欢迎回来</view>
          <view class="username">{{userInfo.username}}</view>
        </view>
      </view>
      <view class="time-info">
        <view class="time">{{ currentTime }}</view>
        <view class="date">{{ currentDate }}</view>
      </view>
    </view>

    <!-- 功能按钮区域 -->
    <view class="function-section">
      <view class="function-item" @tap="navigateTo('/pagesIndex/equipment')">
        <text class="icon">📱</text>
        <text class="function-name">设备列表</text>
      </view>

      <!-- <view class="function-item" @tap="navigateTo('/pages/playback/index')">
        <text class="icon">📹</text>
        <text class="function-name">录像回放</text>
      </view> -->
    </view>

    <!-- 系统状态标题 -->
    <view class="section-title">
      <text class="title-text">系统状态</text>
      <text class="subtitle-text">实时监控数据</text>
    </view>

    <!-- 系统状态卡片区域 -->
    <view class="status-section">
      <view class="status-card">
        <!-- <view class="status-icon green-dot"></view> -->
        <image :src="onlineSrc" class="status-icon"></image>
        <view class="status-info">
          <view class="status-number">{{ onlineDevices }}</view>
          <view class="status-label">正常设备</view>
        </view>
      </view>
      <view class="status-card">
        <!-- <view class="status-icon red-dot"></view> -->
        <image :src="offlineSrc" class="status-icon"></image>
        <view class="status-info">
          <view class="status-number">{{ offlineDevices }}</view>
          <view class="status-label">异常设备</view>
        </view>
      </view>
    </view>

    <!-- 系统运行状态 -->
    <view class="system-status" @tap="handleClick">
      <view class="status-shield">
        <text class="shield-icon">🛡️</text>
      </view>
      <view class="status-text-main">{{ errlineDevices ? "系统运行异常" : "系统运行正常" }}</view>
      <view class="status-text-sub">{{ errlineDevices ? `设备报警（${errlineDevices}）` : "暂无报警信息" }}</view>
    </view>
  </view>
</template>

<script>
import { getUserChannelCount, getMsgList,  } from "@/apis/equipment"
import { getDingUserInfo } from "@/apis/user"

export default {
  data() {
    return {
      onlineSrc: require('@/static/images/shebeizaixian.png'),
      offlineSrc: require('@/static/images/sblx.png'),
      currentTime: "",
      currentDate: "",
      onlineDevices: 0,
      offlineDevices: 0,
      errlineDevices: 0,
      timer: null,
      userInfo: {},
    }
  },
  onLoad() {
    this.updateTime()
    this.timer = setInterval(() => {
      this.updateTime()
    }, 60000) // 每分钟更新一次时间
    this.loadSystemStatus()
    this.fetchGetDingUserInfo()

  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    fetchGetDingUserInfo() {
      getDingUserInfo().then((res) => {
        this.userInfo = res
      })
    },


    // 更新时间显示
    updateTime() {
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, "0")
      const minutes = String(now.getMinutes()).padStart(2, "0")
      this.currentTime = `${hours}:${minutes}`

      const month = now.getMonth() + 1
      const day = now.getDate()
      this.currentDate = `${month}月${day}日`
    },

    // 加载系统状态数据
    loadSystemStatus() {
      getUserChannelCount().then((res) => {
        this.onlineDevices = res.yesCount
        this.offlineDevices = res.noCount
      })
      getMsgList({ page: 1, count: 1000 })
        .then((result) => {
          this.errlineDevices = result.list.length
        })
        .catch((err) => {})
    },

    // 导航到指定页面
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      })
    },
    handleClick() {
      if (this.errlineDevices !== 0) {
        uni.navigateTo({
          url: '/pagesIndex/errList',
        })
      }
    },
  },
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  /* background: linear-gradient(180deg, #6b8eff 0%, #715ab8 100%); */
  background-color: #2563e1;
}

/* 顶部用户信息区域 */
.header-section {
  padding: 40rpx 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar-wrap {
  position: relative;
  margin-right: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.online-dot {
  position: absolute;
  bottom: 5rpx;
  right: 5rpx;
  width: 20rpx;
  height: 20rpx;
  background: #52c41a;
  border-radius: 50%;
  border: 3rpx solid #6b8eff;
}

.user-text {
  color: #fff;
}

.welcome-text {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 5rpx;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
}

.time-info {
  text-align: right;
  color: #fff;
}

.time {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.date {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 功能按钮区域 */
.function-section {
  padding: 0 30rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex: 1; */
  background-color: #fff;
  margin: 0 40rpx;
  border-radius: 16rpx;
  padding: 26rpx;
}

.icon-wrap {
  width: 120rpx;
  height: 120rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.icon {
  font-size: 56rpx;
}

.function-name {
  font-size: 26rpx;
  font-weight: 500;
  margin-top: 20rpx;
}

/* 区域标题 */
.section-title {
  padding: 0 30rpx 20rpx;
  display: flex;
  flex-direction: column;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.subtitle-text {
  font-size: 24rpx;
  color: #fff;
}

/* 系统状态卡片区域 */
.status-section {
  padding: 0 30rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-wrap: wrap;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.status-card {
  width: 100%;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  min-height: 160rpx;
  display: flex;
  flex-direction: flex;
  align-items: center;
  box-sizing: border-box;
}
.status-info {
  flex: 1;
  margin-left: 20rpx;
}
.status-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-bottom: 15rpx;
}

.green-dot {
  background: #52c41a;
}

.red-dot {
  background: #ff4d4f;
}

.orange-dot {
  background: #fa8c16;
}

.progress-circle {
  font-size: 24rpx;
  color: #1890ff;
  font-weight: bold;
}

.status-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.status-label {
  font-size: 26rpx;
  color: #999;
}

.status-trend {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  font-size: 28rpx;
  color: #999;
}

.status-trend.green {
  color: #52c41a;
}

.status-trend.red {
  color: #ff4d4f;
}

/* 系统运行状态 */
.system-status {
  margin: 0 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 50rpx 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  text-align: center;
}

.status-shield {
  margin-bottom: 20rpx;
}

.shield-icon {
  font-size: 80rpx;
}

.status-text-main {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.status-text-sub {
  font-size: 26rpx;
  color: #999;
}

/* 底部导航栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #f0f0f0;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.tabbar-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tabbar-text {
  font-size: 28rpx;
  color: #999;
}

.tabbar-text.active {
  color: #1890ff;
  font-weight: bold;
}
</style>
